<template>
  <div class="adminBox">
    <div class="effectMenuBox">
        <el-menu
            class="el-menu-vertical-demo"
            default-active="1-1"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>管理详情</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1" @click="handShopItemListOn">商品上/下架</el-menu-item>
                    <el-menu-item index="1-2" @click="handGetNewsFileOn">获取最新消息</el-menu-item>
                    <el-menu-item index="1-3" @click="handChangeShopItemInfoOn">更改商品属性</el-menu-item>
                    <el-menu-item index="1-4">订单列表</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <el-icon><Setting /></el-icon>
                    <span>我的</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">我的基础信息</el-menu-item>
                    <el-menu-item index="2-2">我的账号信息</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </div>
    <div class="showMenuBox">
        <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";

let router = useRouter();


const handleOpen = (key, keyPath) => {
  
}
const handleClose = (key, keyPath) => {
  
}

function handShopItemListOn(){
    router.push('/admin/shopItem')
}
function handGetNewsFileOn(){
    router.push('/admin/getNewsFile')
}
function handChangeShopItemInfoOn(){
    router.push('/admin/changeShopItemInfo')
}
</script>

<style scoped>
*{
    box-sizing: border-box;
    list-style: none;
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 200px;
}
.adminBox{
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
.effectMenuBox{
    width: 300px;
    height: 100%;
}
.showMenuBox{
    flex: 1;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}
.showMenuBox::-webkit-scrollbar {
  display: none;
}
</style>